<template>
    <div class="service-box pb-150 flex flex-col">
        <van-nav-bar :title="$t('在线客服')" left-arrow @click-left="onClickLeft" fixed />
        <div class="flex-1" v-if="kefu_url">
            <iframe :src="kefu_url" width="100%" height="100%" frameborder="0"></iframe>
        </div>
        <div v-else class="localKefu flex-1 flex">
            <div class="flex flex-col px-32 box-border flex-1" ref="boxScroll" style="overflow:auto;">
                <div class="w-full py-10 text-grey text-center pt-10" @click="onMore"
                    :style="{ 'visibility': finished ? 'hidden' : 'visiable' }">
                    {{ $t('历史消息') }}</div>
                <ul class="flex flex-col pt-20">
                    <li v-for="(item, index) in list" :key="item.id" class="flex flex-col mt-20">
                        <template v-if="item.delete_status != -1">
                          <p class="font-26 text-center py-20 text-grey">
                            {{ item.createtime }}</p>
                          <div class="flex" :class="item.send_receive === 'send' ? 'justify-end' : ''">
                            <template v-if="item.send_receive === 'receive'">
                                <img src="@/assets/image/assets-center/logo.png" class="w-81 h-81 mr-40" />
                                <div class="responser px-50 py-35 font-30 rounded-lg font-26 chatBg">
                                    <p class="break-word textColor touch" style="max-width: 230px;" v-if="item.type === 'text'">
                                        {{ item.content }}</p>
                                    <img v-else :src="repUrl(item.content)" class="w-200 h-200" @click="onPreview(repUrl(item.content))" />
                                </div>
                            </template>
                            <div class="py-25 px-50 responser-two rounded-lg flex flex-col chatBg" v-else>
                                <img :src="`${repUrl(item.content)}`" class="w-200 h-200" v-if="item.type === 'img'"
                                    @click="onPreview(repUrl(item.content))" />
                                <p class="break-word textColor touch" v-else style="max-width: 230px;">{{ item.content }}
                                </p>
                            </div>
                          </div>
                        </template>
                    </li>
                </ul>
            </div>
            <div
                class="bottom flex justify-between h-130 items-center w-full fixed bottom-0 borderTop px-32 box-border bgBottom">
                <van-uploader :max-size="10000 * 1024" @oversize="onOversize" :after-read="afterRead" :before-read="beforeRead">
                    <img src="@/assets/image/service/photo.png" class="w-72 h-72" />
                </van-uploader>
                <input type="text" v-model="value" :placeholder="$t('请输入您的消息...')"
                    class="flex-1 mx-20 h-full border-none bgBottom textColor"  @keyup.enter="send('text', value)"/>

                  <van-button  plain class="custom-button" :disable="isDisabled" @click="send('text', value)">
                     <img src="@/assets/image/service/send.png" class="w-72 h-72" />
                  </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { _getMsg, _getUnreadMsg, _sendMsg } from '@/API/im.api'
import { _uploadImage } from '@/API/fund.api'
import { Uploader, ImagePreview } from 'vant'
import { HOST_URL} from '@/config'
export default {
    name: 'CustomerService',
    components: {
        [Uploader.name]: Uploader
    },
    data() {
        return {
            list: [],
            value: '',
            lastMsgId: '',
            interval: null,
            unread: 0,
            finished: false, // 没有历史消息
            currentScrollTop: 0,
            isScrollBottom: true,
            HOST_URL,
            isDisabled:false,
            retMsg:false //true可获取聊天记录，false代表从登录验证页面进来，不能获取聊天记录
        }
    },
    computed: {
        ...mapGetters('home', ['kefu_url'])
    },
    created() {
        if(this.$route.params.retMsg==undefined){
          this.retMsg = true;
        }
        this.fetchList()
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
    },
    methods: {
      beforeRead(file) {
        let types = ['image/jpeg', 'image/jpg', 'image/png']
        const isImage = types.includes(file.type);
        if (!isImage) {
          this.$toast(this.$t('上传图片只能是JPG、JPEG、PNG格式!'));
          return false;
        }
        return true;

      },
      //域名替换 自动当前域名获得图片地址
        repUrl(val){
          const oldUrl = val.replace(/^https:\/\/[^/]+/,"")
          const nowUrl = HOST_URL
          return nowUrl+oldUrl
        },
        onOversize(file) {
            this.$toast(this.$t('文件大小不能超过10m'));
        },
        onPreview(url) { // 预览
            ImagePreview([url])
        },
        showTime(index) { // 时间显示
            if (index === 0) {
                return true
            }
            if (index === this.list.length - 1) {
                return false
            }
            if (this.list[index].createtime.split(' ')[0] === this.list[index + 1].createtime.split(' ')[1]) {
                return false
            }
        },
        afterRead(file) { // 文件上传
            this.$toast.loading({ duration: 0 })
            _uploadImage(file, (percent) => {
                console.log(percent)
            }).then(data => {
                this.$toast.clear()
                this.send('img', data)
            }).catch(() => {
                this.$toast.clear();
                file.status = 'failed';
                file.message = this.$t('图片上传失败');
            })
        },
        fetchList(message_id = '') { // 获取消息列表
            let msgObj;
            msgObj = {message_id,show_img:true}
            // if(this.retMsg){
            //   msgObj = {message_id,show_img:true}
            // }else{
            //   msgObj = {message_id,show_img:true,retMsg:this.retMsg}
            // }
            _getMsg(msgObj).then(data => { // this.lastMsgId
                if (!this.lastMsgId) {
                    this.lastMsgId = data.length && data[data.length - 1]['id']
                }
                if (data.length) {
                    if (message_id) { // 加载更多
                        this.lastMsgId = data[data.length - 1]['id']
                        this.list = [...data.reverse(), ...this.list]
                    } else {
                        let list = [...this.list, ...data.reverse()]
                        let hash = {};
                        list = list.reverse().reduce(function (preVal, curVal) {
                            hash[curVal.id] ? ' ' : hash[curVal.id] = true && preVal.push(curVal);
                            return preVal
                        }, []);
                        list.forEach((item, index) => {
                          data.forEach((item2, index2) => {
                            if (item.id === item2.id) {
                              item.delete_status = item2.delete_status
                            }
                          })
                        })
                        this.list = list.reverse()
                    }
                    if (this.isScrollBottom) {
                        this.$refs.boxScroll.scrollTop = this.$refs.boxScroll.scrollHeight - this.$refs.boxScroll.offsetHeight
                    }
                    this.currentScrollTop = this.$refs.boxScroll.scrollTop;
                    if (data.length < 10) {
                        this.finished = true
                    }
                }

                // else  {
                //     this.list = [{ id: '1', send_receive: 'receive', content: this.$t('你好，欢迎来到我们的数字货币平台!'), type: 'text'}]
                // }
                if (!message_id) {
                    this.clearInterval()
                    this.interval = setInterval(() => {
                        this.fetchList()
                    }, 1000)
                }
            })
        },
        handleScroll() {
            if (this.$refs.boxScroll &&this.$refs.boxScroll.scrollTop == this.currentScrollTop) {
                this.isScrollBottom = true
            } else {
                this.isScrollBottom = false
            }
        },
        onMore() { // 加载更多
            this.fetchList(this.lastMsgId)
        },
        clearInterval() {
            if (this.interval) {
                clearInterval(this.interval)
                this.interval = null
            }
        },
        fetchUnread() { // 获取未读
            _getUnreadMsg().then(data => {
                this.unread = data
            })
        },
        onClickLeft() { // 返回
            this.$router.go(-1);
        },
        send(type = 'text', content = '') { // 发送消息, img 也当消息text
            if (!content) {
                this.$toast(this.$t('请输入消息内容'))
                return
            }
            if (!this.isDisabled) {
                this.isDisabled = true; // 禁用按钮
                _sendMsg(type, content).then(data => {
                    this.isScrollBottom = true
                    this.value = ''
                     this.isDisabled = false;
                }).catch(error => {
                    console.error(error);
                    this.isDisabled = false; // 启用按钮，即使出现错误也能再次点击
                });
            }
        },
    },
    beforeDestroy() {
        this.clearInterval()
    },
    activated() {
        window.addEventListener('scroll', this.handleScroll, true)
    },
    deactivated() {
        this.clearInterval()
        window.removeEventListener('scroll', this.handleScroll)
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll)
    }
}
</script>
<style lang="scss" scoped>
.service-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    ::v-deep .van-hairline--bottom::after {
        @include themify() {
            border-color: themed("border_color");
        }
    }
}

.break-word {
    word-wrap: break-word;
    white-space: pre-wrap;
}

.max-w-230 {
    max-width: 230px;
}

.responser {
    position: relative;

    &::after {
        content: '';
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;

        @include themify() {
            border-right: 2px solid themed("chat_bg");
        }

        position: absolute;
        left: -20px;
        top: 20px;
    }
}

.responser-two {
    position: relative;

    &::after {
        content: '';
        width: 0;
        height: 0;
        border-bottom: 10px solid transparent;
        border-top: 10px solid transparent;

        @include themify() {
            border-left: 20px solid themed("chat_bg");
        }

        position: absolute;
        right: -19px;
        top: 20px;
    }
}

.borderTop {
    @include themify() {
        border-top: 1px solid themed("border_color");
    }
}

.localKefu {
    overflow: auto;
    padding-bottom: 40px;
}

.van-nav-bar--fixed {
    position: relative !important;
}

.bottom {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}


.custom-button {
  border: none;
  padding: 0 20px;
  background: none;
}

.custom-button:hover {
  background: none;
}
.touch{
  -webkit-user-select: text;
  user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
}
</style>
